<template>
	<el-table :data="tableData" border  ref='tableRef'    :header-cell-style="{background:'#5492cc',color:'#fff'}" style="width: 100%;margin-top: 20px;" @sort-change="orderBy">

		<!-- <span class="style" :class="[scope.row.suspendStatus=='紧急'?'jinji':scope.row.suspendStatus=='正常'?'zhengchang':'zanting']" @click="$emit(item.eventName,scope.row)">{{scope.row[item.prop]|suspendStatus}}</span> -->


		<template v-for="(item,index) in options.list">
			<el-table-column :prop="item.prop" align="center"  :sortable="item.sortable" sortable="custom"
				:label="item.title" v-if="item.isClick&&item.prop!='resumeBox'">
				<template slot-scope="scope">
					<span class="style" @click="$emit(item.eventName,scope.row)"
						v-if="item.prop == 'arrange'">{{scope.row[item.prop]|arrange}}</span>
					<span class="style"
						:class="[scope.row.suspendStatus=='紧急'?'jinji':scope.row.suspendStatus=='正常'?'zhengchang':'zanting']"
						@click="$emit(item.eventName,scope.row)"
						v-else-if="item.prop == 'suspendStatus'">{{scope.row.suspendStatus}}</span>


					<span class="style"
						:class="[scope.row.suspendStatus1=='紧急'?'jinji1':scope.row.suspendStatus1=='正常'?'zhengchang1':'zanting1']"
						@click="$emit(item.eventName,scope.row)"
						v-else-if="item.prop == 'suspendStatus1'">{{scope.row.suspendStatus1}}</span>


					<span class="style" @click="$emit(item.eventName,scope.row)"
						v-else-if="item.prop == 'oldRemarks'">{{scope.row[item.prop]|intercept}}</span>
					<span class="style" @click="$emit(item.eventName,scope.row)"
						v-else>{{scope.row[item.prop]?scope.row[item.prop]:'-'}}</span>
				</template>
			</el-table-column>
			<el-table-column :prop="item.prop" align="center" :label="item.title" v-else-if="item.prop=='resumeBox'">
				<template slot-scope="scope">
					<p class="bule" @click="$emit('uploadResume',scope.row)">上传简历</p>
					<p class="bule"  @click="$emit('lookResume',scope.row)">查看简历</p>
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作" v-else-if="item.prop=='opration'" align="center">
				<template slot-scope="scope">
					<el-button v-for="(opt,index) in scope.row.operation" :type="opt.isBtn?'':'text'"  :class="[{'red borderNone':opt.red}]"
						@click="$emit(opt.title,scope.row)" size="small">{{opt.name}}</el-button>
<!-- 						
						<el-button v-for="(opt,index) in item.operation" :type="opt.isBtn?'':'text'" v-show="scope.row.type=='录入'&&opt.name!='招聘信息录入'"
							@click="$emit(opt.title,scope.row)" size="small">{{opt.name}}</el-button>
	
							<span v-show="scope.row.recruitmentStatus=='2'"
							@click="$emit('remarkDetail',scope.row)" size="small" class="red borderNone">招聘信息已录入</span>	 -->
				
				
				</template> 
			</el-table-column>
		
			<el-table-column :prop="item.prop" align="center" :label="item.title" v-else>
				<template slot-scope="scope">
					<span v-if="item.prop == 'arrange'">{{scope.row[item.prop]|arrange}}</span>
					<span
						v-else-if="item.prop == 'newRemarks' || item.prop == 'projectRemark'">{{scope.row[item.prop]|intercept}}</span>
					<span v-else>{{scope.row[item.prop]?scope.row[item.prop]:'-'}}</span>
				</template>
			</el-table-column>
		</template>
		<el-table-column fixed="right" label="简历" v-if="options.noResume" align="center">
			<template slot-scope="scope">
				<el-button v-for="(opt,index) in options.resumeList" :type="opt.isBtn?'':'text'"
					@click="$emit(opt.title,scope.row)" size="small">{{opt.name}}</el-button>
			</template>
		</el-table-column>
		<el-table-column fixed="right" label="操作" v-if="options.noOperation" align="center">
			<template slot-scope="scope">
				<el-button v-for="(opt,index) in options.operation" :type="opt.isBtn?'':'text'" v-show="scope.row.type!='录入'"
					@click="$emit(opt.title,scope.row)" size="small">{{opt.name}}</el-button>
					
					<el-button v-for="(opt,index) in options.operation" :type="opt.isBtn?'':'text'" v-show="scope.row.type=='录入'&&opt.name!='招聘信息录入'"
						@click="$emit(opt.title,scope.row)" size="small">{{opt.name}}</el-button>

						<span v-show="scope.row.recruitmentStatus=='2'"
						@click="$emit('remarkDetail',scope.row)" size="small" class="red borderNone">招聘信息已录入</span>	
			
			
			</template> 
		</el-table-column>
		
		<el-table-column fixed="right" label="操作" v-if="options.operationBtn" align="center">
			<template slot-scope="scope">
				<div v-show="checkman!='总账号'">				
				<el-button   v-show="scope.row.recruitmentStatus=='1'"
					@click="$emit('recruitmentStatus1',scope.row)" size="small" class="bule borderNone">招聘信息录入</el-button>
					<span v-show="scope.row.recruitmentStatus=='2'"
						@click="$emit('recruitmentStatus2',scope.row)" size="small" class="red borderNone">招聘信息已录入</span>
					</div>

				<div v-show="checkman=='总账号'">				
				<el-button   v-show="scope.row.recruitmentStatus=='1'"
					 size="small" class="gary borderNone">尚未录入</el-button>
					<span   v-show="scope.row.recruitmentStatus=='2'"
						@click="$emit('recruitmentStatus2',scope.row)" size="small" class="red borderNone">招聘信息已录入</span>
					</div>
			
			
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	export default {
		props: {
			options: {
				require: true,
				type: Object
			}
		},
		data() {
			return {
				tableData: [],
				checkman:''
			}
		},

		methods: {
			orderBy(data) {
				if(data.order==null||data.order=='ascending'){
					return
				}
				let sortType = 0;
				// console.log(data);
				if (data.prop == 'createTime') {
					sortType = 0
				} else if (data.prop == 'communication') {
					sortType = 1
				} else if (data.prop == 'informInterview') {
					sortType = 2
				} else if (data.prop == 'attendanceInterview') {
					sortType = 3
				} else if (data.prop == 'secondInterview') {
					sortType = 4
				} else if (data.prop == 'attendanceSecondInterview') {
					sortType = 5
				} else if (data.prop == 'matriculate') {
					sortType = 6
				} else if (data.prop == 'entry') {
					sortType = 7
				}else if (data.prop == 'suspendStatus1') {
					sortType = 8
				}
				
				
				let params = {	
					pageNum: 1,
					pageSize: 10,
					sortType: sortType
				}
				if(localStorage.getItem('saveData')){
					Object.assign(params,JSON.parse(localStorage.getItem('saveData'))) 
				}
				this.$telAxios.post('/v1/librarian/projectOverview', params).then(res => {
					this.tableData = res.data.data.list
					this.tableData.forEach(item => {
						if (item.suspendStatus == '1') {
							item.suspendStatus1 = '紧急'
						} else if (item.suspendStatus == '2') {
							item.suspendStatus1 = '正常'
						} else {
							item.suspendStatus1 = '暂停'
						}
						if (item.recruitmentList.length > 0) {
							item.recruitmentList.forEach(data => {
								item.recruitmentChannel += data + '\n'
							})
							item.recruitmentChannel = item.recruitmentChannel.substring(9)
						}
					})
				})
				//把页码放到第一页
				this.$emit('changeCur',1)

			},
			sortState(data, scope) {
				console.log(data);
				console.log(scope);
			},
		},
		created() {
			this.tableData = this.options.data;
			this.checkman=localStorage.getItem('checkHuman')
		},
		watch: {
			deep:true,
			'options'() {
				this.tableData = this.options.data;
			},
			'options.data'() {
				this.tableData = this.options.data;
			}
		}
	}
</script>

<style scoped="scoped">
	.style {
		color: #40AAFF;
		cursor: pointer;
	}


.borderNone {
	border:none;
	background-color: transparent !important;
}

	.zhengchang,
	.zanting,
	.jinji {
		color: #333333;
		position: relative;
	}

	.red {
		color: red !important;
	}

	.gary {
		color: rgb(194, 194, 194) !important; 
	}

	.zhengchang1,
	.zanting1,
	.jinji1 {
		color: #333333;
		position: relative;
	}

	.jinji::before {
		color: #333333;
		display: inline-block;
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		left: -35px;
		top: -2px;
	}
	.bule{
		color: #409EFF;
		cursor: pointer;
	}

	.jinji1::before {
		color: #333333;
		display: inline-block;
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		left: -35px;
		top: -2px;
	}
	
	/deep/.el-table th .gutter{
	    display: table-cell!important;
	}

	.zhengchang::before {
		display: inline-block;
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: dodgerblue;
		position: absolute;
		left: -35px;
		top: -2px;
	}


	.zhengchang1::before {
		display: inline-block;
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: dodgerblue;
		position: absolute;
		left: -35px;
		top: -2px;
	}

	.zanting::before {
		display: inline-block;
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: orange;
		position: absolute;
		left: -35px;
		top: -2px;
	}
	/deep/ .el-button--small {
		width: 80px;
	}

	.zanting1::before {
		display: inline-block;
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: orange;
		position: absolute;
		left: -35px;
		top: -2px;
	}
</style>
